<template>
  <div class="outter">
    <a-spin :spinning="spinning">
      <ALLTAB
        style="width: 100%; min-height: 500px"
        :defaultKey="`搜索`"
        :menu="menu"
        :caiping="{ caiping: caiping }"
      >
        <template v-slot:searchmenu>
          <a-input-search
            style="width: 50%; margin: 10px auto; display: block"
            placeholder="搜索菜品"
            v-model="caiping"
            enter-button
          />
          <FOODITEM
            v-for="(item, index) in searchmenu"
            :item="item"
            :key="index"
          >
            <template v-slot:method>
              <div v-if="!(item.guige || item.combo)" class="manyoutter">
                <img
                  v-if="item.num > 0"
                  @click="jian(item)"
                  class="manyicon"
                  src="@/assets/jian.png"
                  alt=""
                />
                <div v-if="item.num > 0" class="many">{{ item.num }}</div>
                <img
                  class="manyicon"
                  @click="add(item)"
                  src="@/assets/jia.png"
                  alt=""
                />
              </div>
              <div v-else class="manyoutter">
                <a-badge
                  :number-style="{
                    backgroundColor: '#2c2c2c',
                    color: 'white',
                  }"
                  :count="item.num"
                >
                  <a-button type="primary" @click="chooseGuige(item)"
                    >选规格</a-button
                  >
                </a-badge>
              </div>
            </template>
          </FOODITEM>
        </template>
        <template v-slot:do="slotProps">
          <div
            v-if="!(slotProps.item.guige || slotProps.item.combo)"
            class="manyoutter"
          >
            <img
              v-if="slotProps.item.num > 0"
              @click="jian(slotProps.item)"
              class="manyicon"
              src="@/assets/jian.png"
              alt=""
            />
            <div v-if="slotProps.item.num > 0" class="many">
              {{ slotProps.item.num }}
            </div>
            <img
              class="manyicon"
              @click="add(slotProps.item)"
              src="@/assets/jia.png"
              alt=""
            />
          </div>
          <div v-else class="manyoutter">
            <a-badge
              :number-style="{
                backgroundColor: '#2c2c2c',
                color: 'white',
              }"
              :count="slotProps.item.num"
            >
              <a-button type="primary" @click="chooseGuige(slotProps.item)"
                >选规格</a-button
              >
            </a-badge>
          </div>
        </template>
      </ALLTAB>
    </a-spin>
    <div class="buy">
      <div class="table">
        <div @click="changeFullScreen" class="quanping">全屏模式</div>
        <span>桌号：</span>
        <a-select
          :maxTagCount="3"
          v-model="table"
          style="width: 120px"
          :dropdownMenuStyle="{ height: 70 + 'px' }"
          @change="selectChange"
        >
          <a-select-option
            v-for="(i, index) in tablelist"
            :key="index"
            :value="i"
          >
            {{ i }}
          </a-select-option>
        </a-select>
        <div>
          <span>备注:</span><a-input v-model="note" placeholder="请输入顾客的备注"></a-input>
        </div>
      </div>
      <div class="detail">
        <div class="twoabsolute">
          <div class="twotitle">名称</div>
          <div class="twoprice">价格</div>
          <div class="twooutter">数量</div>
        </div>
        <div class="two" v-for="(item, index) in carmenu" :key="index">
          <div class="twotitle">
            {{ item.itemName
            }}<a
              href="javascript:;"
              v-if="item.descri"
              @click="changeguige(item)"
              class="detailDescri"
              >{{ item.descri }}▼</a
            >
          </div>
          <div class="twoprice">￥{{ (item.price * item.num).toFixed(2) }}</div>
          <div class="twooutter">
            <img
              class="twoicon"
              @click="jian(item)"
              src="@/assets/jian.png"
              alt=""
            />
            <div class="many">{{ item.num }}</div>
            <img
              class="twoicon"
              @click="add(item)"
              src="@/assets/jia.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="total">
        <a-popconfirm
          :disabled="!(carmenu.length > 0)"
          title="你确定清空购物车吗"
          ok-text="确定"
          cancel-text="取消"
          @confirm="true"
          ><div class="totalshop">
            <a class="totalshopa" href="javascript:;"
              ><a-icon type="shopping-cart" />清空购物车</a
            >
          </div></a-popconfirm
        >
        <div class="totalmany">合计：{{ totalmany.summany }}件</div>
        <div class="totalmuch">总价：{{ totalmany.summuch.toFixed(2) }}元</div>
        <a-button
          size="large"
          :disabled="!(carmenu.length > 0)||table===''"
          class="totalbuy"
          type="primary"
          @click="zhifuvisible = true"
          >结算</a-button
        >
      </div>
    </div>
    <a-modal
      title="支付"
      :visible="zhifuvisible"
      :confirm-loading="confirmLoading"
      @ok="submitsuccess"
      @cancel="handleCancel"
      okText="完成支付"
      cancelText="取消"
    >
      <img class="zhifu" src="@/assets/zhifu.png" alt="" />
    </a-modal>
    <GUIGE ref="guige"></GUIGE>
  </div>
</template>

<script>
import ALLTAB from "@/components/alltab";
import FOODITEM from "@/components/foodItem";
import GUIGE from "@/components/guige";
import {
  doTaoCan,
  clearShopCar,
  dofood,
  getRightmenu,
  commitOrder,
  chooseTable,
  changeTable,
  getTable,
} from "@/api/buy";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      caiping: "",
      confirmLoading: false,
      zhifuvisible: false,
      menu: [{ categoryName: "面类", child: [{ itemName: "面包" }] }],
      table: "",
      tablelist: [],
      spinning: false,
      note:""
    };
  },
  created() {},
  mounted() {
    this.getAllTable();
    this.getmenu();
  },
  components: { FOODITEM, ALLTAB, GUIGE },
  computed: {
    // 自动生成购物车
    carmenu() {
      let car = [];
      this.menu.map((fitem) => {
        fitem.child.map((item) => {
          if (item.num > 0) {
            if (item.guige || item.combo) {
              item.kids.map((i) => {
                if (i.num > 0) {
                  car.push(i);
                }
              });
            } else {
              car.push(item);
            }
          }
        });
      });
      return car;
    },
    totalmany() {
      let summany = 0,
        summuch = 0;
      this.carmenu.map((item) => {
        summany += item.num;
        summuch += item.num * item.price;
      });
      return { summany, summuch };
    },
    searchmenu() {
      let car = [];
      this.menu.map((fitem) => {
        fitem.child.map((item) => {
          if (item.itemName.indexOf(this.caiping) !== -1) car.push(item);
        });
      });
      return car;
    },
  },
  methods: {
    getmenu() {
      this.spinning = true;
      getRightmenu().then((res) => {
        res.data.rightmenu.map((item) => {
          item.child.map((i) => {
            i.num = 0;
          });
        });
        this.menu = res.data.rightmenu;
        this.spinning = false;
      });
    },
    getAllTable() {
      getTable().then((res) => {
        let seats = [];
        res.data.tableList.map((item) => {
          if (item.isOccupied === 0) {
            seats.push(item.seatNo);
          }
        });
        if (seats.length === 0) {
          this.$notification.error({ message: '系统提示', description:'暂时无座，请重新刷新',duration: 40})
        } else {
          this.tablelist = seats;
          const qs = require("qs");
          chooseTable(qs.stringify({ table: seats[0] })).then((res) => {
            this.table = seats[0];
          });
        }
      });
    },
    changeguige(i) {
      this.$refs.guige.change(i, this.menu);
    },
    clearall(flag) {
      if (flag) {
        clearShopCar();
      }
      this.carmenu.map((item) => {
        item.num = 0;
        if (item.grandKey != undefined) {
          this.menu[item.grandKey].child[item.parentKey].num = 0;
        }
      });
      this.note=""
    },
    submitsuccess() {
      commitOrder({
        remark:this.note,
        // temOrder:this.carmenu
        }).then((res) => {
        if(res.code===401){
          this.$notification.error({ message: '系统提示', description:'座位已被选择，请重新选择',duration: 4})
        }else{
          this.clearall(false);
          this.note=""
          this.$message.success("购买成功");
          this.getAllTable();
        }
      });
      this.zhifuvisible = false;
    },
    handleCancel() {
      this.zhifuvisible = false;
    },
    add(item) {
      this.do(item, "add");
    },
    jian(item) {
      this.do(item, "reduce");
    },
    do(item, method) {
      let des = item.descri;
      if (item.descri === undefined || item.descri.indexOf("+") === -1) {
        des = (item.descri === undefined ? "" : item.descri) + "+";
      }
      if (item.combo === true) {
        doTaoCan({
          comboNo: item.itemNo,
          method: method,
          num: 1,
          name: des,
          price: item.price + "",
        }).then((res) => {
          this.method(item, method);
        });
      } else {
        console.log({
          itemNo: item.itemNo,
          method: method,
          num: 1,
          detail: des,
        });
        {
          dofood({
            itemNo: item.itemNo,
            method: method,
            num: 1,
            detail: des,
          }).then((res) => {
            this.method(item, method);
          });
        }
      }
    },
    method(item, meth) {
      if (meth === "add") {
        item.num++;
        if (item.item != undefined) {
          this.menu[item.grandKey].child[item.parentKey].num++;
        }
      } else {
        item.num--;
        if (item.item != undefined) {
          this.menu[item.grandKey].child[item.parentKey].num--;
        }
      }
    },
    chooseGuige(item) {
      this.$refs.guige.show(item);
    },
    ...mapActions(["setSidebar"]),
    changeFullScreen() {
      const element = document.documentElement;
      // 如果是全屏状态
      if (this.fullscreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 如果浏览器有这个Function
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      // 判断全屏状态的变量
      this.fullscreen = !this.fullscreen;
      this.setSidebar(false);
    },
    selectChange(value) {
      changeTable({ table: this.table }).then((res) => {
        if (res.code === 409) {
          this.$notification.error({
            message: "失败",
            description: "座位已被占用，请重新选择！",
          });
        } else {
          this.$message.success(`选座成功！`);
        }
      });
    },
  },
};
</script>

<style scoped>
.outter {
  padding-left: 10px;
  /* width: 95%; */
}
.tab {
  width: 90%;
  height: 420px;
  overflow-y: scroll;
  padding-right: 5px;
}

.manyoutter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.manyicon {
  height: 40px;
  width: 40px;
}
.many {
  font-size: 24px;
  font-weight: 900;
  margin: 0 8px;
}
.quanping {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 20px;
  padding: 10px;
  background-color: rgb(231 231 231);
  font-size: 18px;
  font-weight: 900;
  color: white;
  text-align: center;
}
.table span {
  color: rgb(44, 44, 44);
  font-weight: 900;
  font-size: 22px;
}
.buy {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin-top: 25px;
}
.twoicon {
  height: 25px;
  width: 25px;
}
.detail {
  width: 60%;
  height: 190px;
  overflow-y: scroll;
  border-radius: 15px;
  background-color: white;
  padding: 0px 15px 15px;
  color: rgb(44, 44, 44);
  font-size: 18px;
  font-weight: 900;
}
.two {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  min-width: 230px;
}
.twoabsolute {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  z-index: 2;
  padding: 10px 0px;
  min-width: 230px;
}
.twotitle {
  width: 30%;
}
.twoprice {
  width: 30%;
}
.twooutter {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.totalshop {
  text-align: center;
}
.totalshopa {
  font-size: 19px;
  color: rgb(151, 151, 151);
  font-weight: 700;
}
.totalmany {
  font-size: 19px;
  color: rgb(151, 151, 151);
  font-weight: 700;
  text-align: center;
}
.totalmuch {
  font-size: 25px;
  color: rgb(44, 44, 44);
  font-weight: 700;
  text-align: center;
}
.totalbuy {
  text-align: center;
  width: 100%;
  /* line-height: 30px; */
  background-color: rgb(44, 44, 44);
  /* padding: 5px; */
  border-radius: 15px;
  color: white;
  font-weight: 900;
  font-size: 20px;
}
.zhifu {
  height: 300px;
  width: 300px;
  display: block;
  margin: 0 auto;
}
.detailDescri {
  background-color: rgb(231, 231, 231);
  display: inline-block;
  padding: 3px;
  border-radius: 10px;
  font-size: 14px;
  color: grey;
}
</style>
